{% stylesheet %}
.container-fill.block_slides {
  padding: 0;
}

.block_slides {
  text-align: center;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}

.block_slides .carousel-panel-container {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.block_slides .carousel-panel-container .carousel-panel-container-item {
  display: inline-block;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  vertical-align: top;
}

.block_slides .swiper-slide {
  position: relative;
}

.block_slides .slide-item-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: var(--mask-color);
  opacity: var(--mask);
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-mask {
    display: none;
  }
}

.block_slides .slide-item-image {
  height: var(--slide-height);
  width: 100%;
  object-fit: cover;
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-image {
    height: calc(var(--slide-height) * 0.6);
    display: none;
  }
}

.block_slides .block-image-mobile {
  display: none;
}

@media screen and (max-width: 767px) {
  .block_slides .block-image-mobile {
    display: block;
  }
}

.block_slides .slide-item-content {
  width: var(--general_layout_width);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 100;
}

@media screen and (min-width: 768px) {
  .block_slides .slide-item-content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (min-width: 767px) and (max-width: 1200px) {
  .block_slides .slide-item-content {
    width: 100%;
    padding: 0 80px !important;
  }
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content {
    width: 100%;
  }
}

.block_slides .slide-item-content .content-wrapper {
  padding: 42px 35px;
  background-color: #fff;
  border-radius: 0;
  width: 100%;
  box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .block_slides .slide-item-content .content-wrapper {
    width: 520px;
    border-radius: 20px;
  }
}

.block_slides .slide-item-content .slide-item-cell {
  margin-top: 50px;
  display: flex;
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content .slide-item-cell {
    margin-top: 20px;
  }
}

.block_slides .slide-item-content .slide-item-title {
  font-weight: 300;
  font-size: 40px;
  line-height: 1.2;
  color: var(--title-color);
  font-family: var(--title_font_family);
  font-style: var(--title_font_style);
  font-weight: var(--title_font_weigth);
  letter-spacing: var(--title_letter_spacing);
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content .slide-item-title {
    font-size: 32px;
  }
}

.block_slides .slide-item-content .slide-item-des {
  font-size: 14px;
  line-height: 1.2;
  color: var(--subtitle-color);
  margin-top: 15px;
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content .slide-item-des {
    font-size: calc(14px * 0.8);
  }
}

.block_slides .slide-item-content .slide-item-name {
  display: inline-block;
  line-height: 1.2;
  color: var(--btn-font-color);
  display: inline-block;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bt-border-color);
  background-color: var(--bt-border-color);
  border-radius: var(--button_border_radius);
  box-sizing: border-box;
  padding: 15px 30px;
  transition: transform 0.2s ease;
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content .slide-item-name {
    font-size: calc(16px * 0.8);
  }
}

.block_slides .slide-item-content .slide-item-name:hover {
  transform: scale(1.02);
}

.block_slides .slide-item-content-left {
  align-items: flex-start;
}

.block_slides .slide-item-content-left .slide-item-title,
.block_slides .slide-item-content-left .slide-item-des {
  text-align: left;
}

.block_slides .slide-item-content-left .slide-item-cell {
  justify-content: start;
}

.block_slides .slide-item-content-center {
  align-items: center;
}

.block_slides .slide-item-content-center .slide-item-title,
.block_slides .slide-item-content-center .slide-item-des {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content-center .slide-item-title,
  .block_slides .slide-item-content-center .slide-item-des {
    text-align: left;
  }
}

.block_slides .slide-item-content-center .slide-item-cell {
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content-center .slide-item-cell {
    justify-content: flex-start;
  }
}

.block_slides .slide-item-content-right {
  align-items: flex-end;
}

.block_slides .slide-item-content-right .slide-item-title,
.block_slides .slide-item-content-right .slide-item-des {
  text-align: right;
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content-right .slide-item-title,
  .block_slides .slide-item-content-right .slide-item-des {
    text-align: left;
  }
}

.block_slides .slide-item-content-right .slide-item-cell {
  justify-content: flex-end;
}

@media screen and (max-width: 767px) {
  .block_slides .slide-item-content-right .slide-item-cell {
    justify-content: flex-start;
  }
}

.block_slides .nav_btn_box {
  display: flex;
  gap: 8px;
  justify-content: center;
  border-bottom: 1px solid rgba(14, 27, 77, 0.08);
}

.container-wrapper .slide-item-content {
  padding: 0 80px;
}

.block_slides .swiper-pagination-bullet {
  opacity: 1;
  background-color: #949494;
}

.block_slides .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  bottom: 0;
  width: auto;
  margin: 0 12px;
  font-size: 12px;
}

.block_slides .swiper-pagination-bullet-active {
  background: #b9a16b;
  padding: 2px;
}

.block_slides .swiper-next, .block_slides .swiper-prev {
  cursor: pointer;
  height: 44px;
  width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block_slides .swiper-next:focus, .block_slides .swiper-prev:focus {
  outline: none;
}

.block_slides .swiper-next svg, .block_slides .swiper-prev svg {
  width: 10px;
  height: 10px;
  transform: rotate(-90deg);
}

.block_slides .swiper-prev {
  left: 0;
}

.block_slides .swiper-prev:focus {
  outline: none;
}

.block_slides .swiper-prev svg {
  transform: rotate(90deg);
}

{% endstylesheet %}
{% assign blockId = block_id | default : section.block_id %}
{% assign defaultImageEmpty = 'banner@2x.png' | public_asset_abs_url %}

{% if section.settings.is_width_fill  %}
    {% assign container = "container-fill" %}
{% else %}
    {% assign container = "container-wrapper" %}
{% endif %}

<div class="block_slides {{container}}">
  <div class="carousel-panel-container swiper-carousel-{{ blockId }}" id="swiper-carousel-{{ blockId }}">
      <ul class="swiper-wrapper">
          {% for block in section.blocks %}
          <li class="swiper-slide">
              {%- capture href -%}
              {% if block.link.url != "" %}{{ block.link.url | append: '?data_from=' | append: data_from }}{% else %}javascript:;{%endif%}
              {%- endcapture -%}
				{%- if block.button_text == "" -%}
				<a href="{{block.link | setUrlDataFrom:data_from}}" style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index:100"></a>
				{%- endif -%}

              <a class="carousel-panel-container-item" href="{{href}}"  style="--bt-border-color:{{ block.button_border_color }};--title-color:{{ block.title_color }};--subtitle-color:{{block.subtitle_color}};--btn-bg-color:{{ block.button_background_color }};--btn-font-color:{{ block.button_font_color }};--slide-height:{{section.settings.height}}">
					{% include 'lazy_img',  src:block.pc_image.src,file_type:"banner", class:"slide-item-image block-image-pc",  alt:block.pc_image.alt %}
					{% assign mobile_image_src = block.mobile_image.src|default:block.pc_image.src %}
					{% include 'lazy_img',  src:mobile_image_src, file_type:"banner", class:"slide-item-image block-image-mobile",  alt:block.mobile_image.alt %}
                  <div class="slide-item-mask" style="--mask-color:{{ block.mask_color }};--mask: {{ block.mask | divided_by : 100  }};"></div>
					{% if block.title != '' or block.subtitle != '' or block.button_text != '' %}
										
					<div class="slide-item-{{ blockId }} slide-item-content slide-item-content-{{ block.position }}">
						<div class="content-wrapper">
							<div class="slide-item-title">{{ block.title }}</div>
							{% if block.subtitle != "" %}
							<div class="slide-item-des">{{ block.subtitle }}</div>
							{% endif %}
							{% if block.button_text %}
							<div class="slide-item-cell">
							<span class="slide-item-name">{{ block.button_text }}</span>
							</div>
							{% endif %}
						</div>
					</div>
					{% endif %}

              </a>
          </li>
          {% endfor %}
      </ul>
     
  </div>
  <div class="nav_btn_box">
    {% if section.blocks.size >1  %}
    <div class="swiper-prev model-hide" id="block_slides-prev_{{ blockId  }}">{% include 'icon_swiper_nav' %}</div>
    <div class="swiper-pagination swiper-carousel-pagination-{{ blockId }}"></div>
    <div class="swiper-next model-hide" id="block_slides-next_{{ blockId  }}">{% include 'icon_swiper_nav' %}</div>
    {% endif %}
  </div>
</div>
<script type="text/javascript">
(function(){
{%- capture autoplay -%}
{%- if section.settings.is_play -%}
{delay: Number('{{section.settings.duration}}') * 1000}
{%- else -%}
false
{%- endif -%}
{%- endcapture -%}


const sildesSwiper = new Swiper('.swiper-carousel-{{ blockId }}', {
  {% if section.blocks.size >1  %}loop: true,{% endif %}
  autoHeight: true,
  watchOverflow: true,
  autoplay:{% if section.settings.is_play and section.blocks.size >1  %}{delay: Number('{{section.settings.duration}}') * 1000}{% else %}false{% endif %},
  {% if section.blocks.size >1  %}
  pagination: {
      el: '.swiper-carousel-pagination-{{ block_id | default : section.block_id }}',
      type: "fraction",
      clickable:true
  },
  {% endif %}
  navigation: {
    nextEl: '#block_slides-next_{{ blockId  }}',
    prevEl: '#block_slides-prev_{{ blockId  }}',
  }
})
var block = {{section.blocks|json}};
if(block.length){
	moi.addEvent('lazyImg', function(event) {
			if (event.params && block.findIndex(item => {
				return item.pc_image.src == event.params || item['mobile_image'].src == event.params
			}) > -1) {
				sildesSwiper.updateAutoHeight()
			}
	})
}
})()
</script>
{% schema %}
{
	"tag": "cblock",
	"class": "cblock_slides_1",
	"is_global": false,
	"name": {
		"zh_CN": "轮播图1",
		"en_US": "slides1"
	},
	"max_blocks": 15,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "自动轮播",
				"en_US": "Automatic slide"
			},
			"id": "is_play"
		},
		{
			"type": "card_slider",
			"label": {
				"zh_CN": "轮播时间(s)",
				"en_US": "Slide time (s)"
			},
			"default": 2,
			"max": 5,
			"min": 1,
			"id": "duration"
		},
		{
			"type": "card_select",
			"label": {
				"zh_CN": "图片高度",
				"en_US": "Image height"
			},
			"id": "height",
			"option": [
				{
					"label": {
						"zh_CN": "大",
						"en_US": "Big"
					},
					"value": "800px"
				},
				{
					"label": {
						"zh_CN": "中",
						"en_US": "Middle"
					},
					"value": "600px"
				},
				{
					"label": {
						"zh_CN": "小",
						"en_US": "Small"
					},
					"value": "420px"
				},
				{
					"label": {
						"zh_CN": "自适应",
						"en_US": "Adaptive"
					},
					"value": "auto"
				}
			]
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_width_fill",
			"default": true
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "内容",
				"en_US": "Content"
			}
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "轮播图片",
				"en_US": "Slide image"
			},
			"type": "slide-item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "pc端图片",
						"en_US": "Image on PC"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议：大-1920*800px，中-1920*600，小-1920*420",
						"en_US": "Suggested size: large -1920*800px, medium -1920*600, small -1920*420"
					},
					"id": "pc_image"
				},
				{
					"type": "card_image",
					"label": {
						"zh_CN": "移动端图片",
						"en_US": "Mobile image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "尺寸建议1242*2000px",
						"en_US": "Size suggested 1242*2000px"
					},
					"id": "mobile_image"
				},
				{
					"type": "card_select",
					"label": {
						"zh_CN": "标题按钮位置",
						"en_US": "Title button location"
					},
					"id": "position",
					"option": [
						{
							"label": {
								"zh_CN": "居左",
								"en_US": "To the left"
							},
							"value": "left"
						},
						{
							"label": {
								"zh_CN": "居中",
								"en_US": "In the center"
							},
							"value": "center"
						},
						{
							"label": {
								"zh_CN": "居右",
								"en_US": "To the right"
							},
							"value": "right"
						}
					],
					"default": "left"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "标题颜色",
						"en_US": "Header color"
					},
					"default": "#0e1b4d",
					"id": "title_color"
				},
				{
					"type": "card_textarea",
					"label": {
						"zh_CN": "标题",
						"en_US": "Title"
					},
					"id": "title",
					"default": "Image Slide"
				},
				{
					"type": "card_text_editor",
					"label": {
						"zh_CN": "简短描述",
						"en_US": "Short description"
					},
					"id": "subtitle",
					"default": "Tell your brand's story through images Tell your brand's story through imagesTell your brand's Tell your brand's story"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "描述颜色",
						"en_US": "Describe color"
					},
					"default": "#4b547a",
					"id": "subtitle_color"
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接",
						"en_US": "Jump links"
					},
					"default": {
						"type": "",
						"title": "",
						"url": ""
					},
					"id": "link"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "按钮名称",
						"en_US": "Button name"
					},
					"id": "button_text",
					"default": "Shop shampoo"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "按钮文字颜色",
						"en_US": "Button text color"
					},
					"id": "button_font_color",
					"default": "#fff"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "按钮边框",
						"en_US": "Button border"
					},
					"id": "button_border_color",
					"default": "#0e1b4d"
				}
			]
		}
	],
	"style_settings":[
		{
			"type": "card_collapse",
			"label": {
				"zh_CN": "基础",
				"en_US": "Basic"
			},
			"settings": [
				{
					"type": "card_slider",
					"label": {
						"zh_CN": "蒙层透明度",
						"en_US": "Mask transparency"
					},
					"id": "mask",
					"max": "100",
					"min": "0",
					"default": "0"
				},
				{
					"type": "card_color",
					"label": {
						"zh_CN": "蒙层颜色",
						"en_US": "Mask color"
					},
					"id": "mask_color",
					"default": "#000"
				}
			]
		}
	],
	"default": {
		"settings": {
			"is_play": false,
			"duration": "3",
			"height": "600px",
			"is_width_fill": true
		},
		"blocks": [
			{
				"pc_image": {
					"src": "",
					"alt": ""
				},
				"mobile_image": {
					"src": "",
					"alt": ""
				},
				"position": "left",
				"title_color": "#0e1b4d",
				"subtitle_color": "#4b547a",
				"title": "A lamp with personality",
				"subtitle": "Light on your ears",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"button_border_color": "#0e1b4d",
				"button_text": "Shop shampoo",
				"button_font_color": "#fff",
				"mask": "0",
				"mask_color": "#000000",
				"block_type": "slide-item"
			},
			{
				"pc_image": {
					"src": "",
					"alt": ""
				},
				"mobile_image": {
					"src": "",
					"alt": ""
				},
				"position": "center",
				"title_color": "#0e1b4d",
				"subtitle_color": "#4b547a",
				"title": "A lamp with personality",
				"subtitle": "Light on your ears",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"button_border_color": "#0e1b4d",
				"button_text": "Shop shampoo",
				"button_font_color": "#fff",
				"mask": "0",
				"mask_color": "#000000",
				"block_type": "slide-item"
			}
		],
		"style_settings":{
			"mask": "0",
			"mask_color": "#000000"
		}
	}
}
{% endschema %}